<template>
  <div class="main">
    <h1>Main page 测试父传子</h1>
    <h3>可以传递属性，方法 和 父类本身 this</h3>
    <v-header :list="list" :msg='msg' :getData='getData' :mainThis="this"></v-header>
    <h1>HelloWorld</h1>
  </div>
</template>
<script>
  import axios from 'axios';
  import header from './Header.vue';
  export default {
    data () {
      return {
        list:[],
        msg:'我是main.vue 里面的msg，我要传入Header.vue中',
        title:'这是main组件的title'
      }
    },
    methods:{
      getData:function(event){
        var api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
        axios.get(api)
          .then((response)=>{
            console.log(response.data.result.length);
            this.list = response.data.result;
			alert("总共获取到 " + response.data.result.length +"条内容" )
          })
          .catch((err)=>{
            console.error("api error。。。",err)
          })
          .then(()=>{
            console.info("纳尼？")
          })
      }
    },
    mounted() { //生命周期函数
      // this.getData();
    },
    components:{
      'v-header':header
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.licss{
  text-align: left;
}
</style>
